<template>
	<view class="connect">
		<u-navbar back-text=" " :title="title"></u-navbar>
		
		<view class="form_item" style="padding-top: 0;">
			<view class="bag_item_select">
				<view style="margin-bottom: 16rpx;" @click="changeBao(index)" v-for="(item , index) in baoList" :key="index"
					:class="index==baoIndex?'bordercss':''" class="bag_item_box">
					<span>包裹{{index+1}}</span>
					<image @click="delBao(index)" style="width: 24rpx; height: 24rpx; margin-left:16rpx;"
						src="https://www.mengkahuyu.com/index_png/close.png" mode=""></image>
				</view>
			</view>
			<view class="form_item_title" style="">包裹信息</view>
			<view class="form_item_info">
				<view class="form_item_info_input">
					
					<view>
						<span style="color: #FF0000;font-size: 24rpx;" >*</span>
						<span>快递单号</span>
					</view>
					<input class="form_input" maxlength="30"  v-model="baoList[baoIndex].code"  placeholder="请输入快递单号" />
					<!-- <image style="width: 21rpx;margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" /> -->
				</view>	
				
			</view>
			<view class="form_item_title" style="margin-top: 16rpx;" >物品信息</view>
			<view v-for="(item,index) in baoList[baoIndex].item_info" :key="index" class="form_item_info" style="margin-bottom: 16rpx;">
				<view class="form_item_info_input" >
					<view>
						<span  style="color: #FF0000;font-size: 24rpx;" >*</span>
						<span>中文品名</span>
					</view>
					<input class="form_input" v-model="baoList[baoIndex].item_info[index].name" type="text" placeholder="请输入中文品名" />
					<!-- <image style="width: 21rpx;margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" /> -->
				</view>
				<view class="form_item_info_input">
					<view>
						<span style="color: #FF0000;font-size: 24rpx;" >*</span>
						<span>单价</span>
					</view>
					<input maxlength="8" v-model="baoList[baoIndex].item_info[index].price" @input="inputChange($event , index)" class="form_input" type="digit" placeholder="请输入单价" />
				</view>
				<view class="form_item_info_input">
					<view>
						<span style="color: #FF0000;font-size: 24rpx;" >*</span>
						<span>数量</span>
					</view>
					<input maxlength="8" v-model="item.num" class="form_input" type="number" placeholder="请输入数量" />
				</view>
				<view v-if=" baoList[baoIndex].item_info.length > 1" @click="delInfo(index)" class="form_item_info_add">
					<image style="width: 24rpx; height: 24rpx;margin-right: 16rpx;" src="https://www.mengkahuyu.com/index_png/close.png" mode=""></image>
					<span class="add_text">删除</span>
				</view>
				<view v-if=" baoList[baoIndex].item_info.length-1 == index" @click="addInfo" class="form_item_info_add">
					<image style="width: 24rpx; height: 24rpx;margin-right: 16rpx;" src="https://www.mengkahuyu.com/index_png/add_icon.png" mode=""></image>
					<span class="add_text">添加物品信息</span>
				</view>
			</view>
			<view class="form_item_title">备注</view>
			<view class="form_item_info">
				<!-- v-model="info.remark" -->
				<textarea placeholder="请输入备注" v-model="baoList[baoIndex].remark"  style="width: 100%;" class="textarea" name="" id="" maxlength="150" cols="30" rows="5"></textarea>
			</view>
		</view>	
		<view style="width: 100%; height: 200rpx;">
				
		</view>
		<view v-if="order_id>0" class="button_submit">
			<u-button @click="onSubmit(2)" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">修改</u-button>
		</view>
		<view v-if="id != 0" class="button_submit">
			<u-button @click="onSubmit(3)" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">认领</u-button>
		</view>
		<view v-if="id==0 && order_id==0" class="button_submit">
			<u-button class="btns_1" style="margin-right: 50rpx;" @click="addBao()" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">添加</u-button>
			<u-button @click="onSubmit(1)" class="btns_1" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">预报</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'包裹预报',
				order_id:0,
				id:0,
				pop_show:false,
				type:null,
				kor_type:'',
				addressType:'请选择',//仓库国家
				baoIndex:0,//当前是第几个包裹预报的信息
				baoList:[
					{
						"code": null, //快递单号
						"type": 1, //1韩国 2日本
						"item_info": [
							{
								"name": null, //名称
								"price": null, //价格
								"num": null //数量
							}
						], //物品信息	
						"remark": null,
					}
				],
			}
		},
		onLoad(parame) {
			this.kor_type = uni.getStorageSync('kor_type')
			
			if(parame.id){
				this.id = parame.id
				this.title = '包裹认领'
			}
			if(parame.order_id){
				this.order_id = parame.order_id
				this.getInfo()
				this.title = '包裹详情'
			}
		},
		onShow() {
			var token = uni.getStorageSync('token')
			this.kor_type = uni.getStorageSync('kor_type')
			// console.log(this.kor_type)
			if(!token){
				uni.setStorageSync('isModule' , true)
				uni.showModal({
					title: '登录',
					content: '登录后可使用完整功能',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						// console.log('comfirm') //点击确定之后执行的代码
						uni.navigateTo({
							url:'/pages/login/login'
						})
					} else {  
						uni.switchTab({
							url:'/pages/index/index'
						})
						}  
					} 
				})
				return
			}
			if(this.kor_type == 'chn'){
				this.list = [
					{text:'中国威海仓库' , type:1},
				]
			}
			// this.getradioList()
		},
		methods: {
			inputChange(e, index){	
				this.$nextTick(()=>{
					this.baoList[this.baoIndex].item_info[index].price = this.$geShi(e.detail.value)
					// this.info_list[index].price = this.$geShi(e.detail.value)
				})
				
			},
			changeBao(index) {
				// 切换分包
				if (index > (this.baoList.length - 1)) {
					this.baoIndex = this.baoList.length - 1
				} else {
					this.baoIndex = index
				}
			},
			delBao(index) {
				// 刪除分包
				if (this.baoList.length > 1) {
					uni.showModal({
						title: '提示',
						content: '确认删除包裹?',
						cancelText: "取消", // 取消按钮的文字  
						confirmText: "确认", // 确认按钮的文字  
						success: (res) => {
							if (res.confirm) {
								this.baoList.splice(index, 1)
								this.baoIndex = 0
							} else {}
						}
					})
			
				} else {
					uni.showToast({
						title: '至少需要一个包裹',
						icon: 'none'
					})
				}
			
			},
			addBao(){
				// 添加预报包裹
				var data = {
				    "code": null, //快递单号
				    "type": 1, //1韩国 2日本
				    "item_info": [
				    	{
				    		"name": null, //名称
				    		"price": null, //价格
				    		"num": null //数量
				    	}
				    ], //物品信息	
				    "remark": null,
				}
				this.baoList.push(data)	
			},
			getInfo(){
				// 获取包裹闲情
				var data = {
					id:this.order_id
				}
				this.$wqzApi.kor_Order_detail(data).then(res=>{
					this.info = res.data
					this.baoList[0].code = res.data.code
					this.baoList[0].type = 1
					this.baoList[0].item_info = res.data.brand
					this.baoList[0].remark	= res.data.remark
					
				})
				
			},
			onSubmit(type){
				// type 1新增 2认领
				var that = this
				var isOk = true //是否将物品信息全部完善
				var toast = ''
				try{
					this.baoList.forEach((item,index)=>{
						if(!item.code){
							toast = `请输入包裹${this.baoIndex+1}的快递单号`
							throw new Error(toast)
						}
						item.item_info.forEach((ite,ind)=>{
							if(!ite.name){
								toast = `请输入包裹${this.baoIndex+1}中物品信息${ind+1}的中文品名`
								throw new Error(toast)
							}
							if(!ite.num){
								toast = `请输入包裹${this.baoIndex+1}中物品信息${ind+1}的数量`
								throw new Error(toast)
							}
							if(!ite.price){
								toast = `请输入包裹${this.baoIndex+1}中物品信息${ind+1}的单价`
								throw new Error(toast)
							}
						})
					})
				}catch(e){
					isOk = false
				}
				if(!isOk){
					uni.showToast({
						title:toast,
						icon:'none'
					})
					return
				}
				if(type==1){
					// 新增/
					this.$wqzApi.kor_Order_order_add({list:this.baoList}).then(res=>{
						uni.showToast({
							title:'预报成功'
						})
					})
					setTimeout(()=>{	
						uni.redirectTo({
							url:`/pages/packageList/packageList_zh?current=0`
						})
					},1500)
					// 新增	
				}
				if(type==3){
					// 包裹认领
					var that = this
					var data = {
						id:that.id,
						...that.baoList[0]
					}
					this.$wqzApi.kor_Order_ClaimAdd(data).then(res=>{
						uni.showToast({
							title:'认领成功'
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:`/pages/packageList/packageList_zh?current=1`
							})
						},1500)	
					})
				}
				if(type==2){
					// 修改预报订单
					uni.showModal({
						title: '提示',//标题
						content: "确认修改",//提示内容可以加入\r\n进行换行
						showCancel: true,//是否显示取消按钮，默认为true
						cancelText: '取消',//取消按钮的文字
						confirmText: '确定',//确认按钮的文字
						success: res => {
							if (res.confirm) { //点击确定之后执行的代码
								var that = this
								var data = {
									id:that.order_id,
									...that.baoList[0]
								}
								that.$wqzApi.kor_Order_order_update(data).then(res=>{
									uni.showToast({
										title:'修改成功'
									})
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
					
					
				}
				// console.log(type)
			},
			getradioList(){
				// 获取增值服务列表
				
				if(this.order_id ){
					this.$wqzApi.index_service({}).then(res=>{
						res.data.forEach((item,index)=>{
							res.data[index].isChoose = false
						})
						this.radioList = res.data
						this.getInfo()
					})
					
				}else{
					this.$wqzApi.index_service({}).then(res=>{
						res.data.forEach((item,index)=>{
							res.data[index].isChoose = false
						})
						this.radioList = res.data
					})
				}
				if(this.id){
					// this.getInfo()
				}
				
			},
			openPop(){
				this.pop_show = true
				
			},
			onchange(e){
				this.info.type = this.list[e].type
				this.addressType = this.list[e].text
			},
			addInfo(){
				var data = {
					"name": null, //名称
					"price": null, //价格
					"num": null //数量
				}
				this.baoList[this.baoIndex].item_info.push(data)
				// this.info_list.push(data)
			},
			delInfo(index){
				this.baoList[this.baoIndex].item_info.splice(index , 1)
				// this.info_list.splice(index , 1)
			},
			chooseRadio(key){
				this.radioList.forEach((item,index)=>{
					if(index==key){
						this.radioList[index].isChoose = !this.radioList[index].isChoose 
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.scss);
	@import url(./complete.scss);
	
</style>
